<template>
  <div>
    <form action="/">
      <van-search v-model="searchText" background="#3296FA" show-action placeholder="请输入搜索关键词" @search="onSearch"
        @cancel="$router.go(-1)" @focus="isShowSearchResults=false" />
    </form>
    <!-- 搜索结果 -->
    <SearchResults :value="searchText" v-if="isShowSearchResults" />
    <!-- 搜索历史 -->
    <SearchHistory  :history="history" v-else-if="!searchText" />
    <!-- 搜索建议 -->
    <SearchSuggestion @search="onSearch" :value="searchText" v-else />
  </div>
</template>

<script>
import SearchSuggestion from './components/search-suggestion.vue'
import SearchHistory from './components/search-history.vue'
import SearchResults from './components/search-result.vue'
export default {
  data () {
    return {
      searchText: '',
      isShowSearchResults: false,
      history: []
    }
  },
  methods: {
    onSearch (e) {
      // const index = this.history.findIndex(item => item === e)
      // if (index !== -1) {
      //   this.history.splice(index, 1)
      // }
      this.history.unshift(e)
      this.history = [...new Set(this.history)]
      this.searchText = e
      this.isShowSearchResults = true
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {
    SearchSuggestion,
    SearchHistory,
    SearchResults
  },
  created () { },
  mounted () { }
}
</script>

<style scoped lang='less'>
.van-search__action {
  color: #fff;
}
</style>
